import { OperateBase } from '../../common/operate-base';
import './font-size.less';
import { FontStylePlugin } from '../../../pugins/font-style.plugin';
import { NFont } from '../../../types/style.interface';
// import { sureIcon } from '../../common/vars';
const FontSizeOptions = [8,9,10,11,12,14,16,18,20,22,24,26,28,36,42,48,72];
function createSizeOption(size: number) {
    let dom = document.createElement('div') as HTMLElement;
    dom.setAttribute('class', 'font-size-option-item')
    // <div class="font-size-selected-icon">
    // ${sureIcon}
    // </div>
    dom.innerHTML = `
        <div>
        <div class="size-value-content" zSize="${size}">
        ${size}
        </div>
    `;
    return dom;
}
export class FontSize extends OperateBase {
    protected container: HTMLElement;
    protected fontStylePlugin: FontStylePlugin;
    protected iconMap: {[key: string]: number} = {
        'icon-align-left':0,
        'icon-align-center':1,
        'icon-align-right':2
    }
    constructor() {
        super();
    }
    public afterDomInit(): void {
        this.zTableInstance.getHook().afterSelect.add((val) => {
            this.toggleDisabled(val !== null);
            this.disabled = val === null;
        });
        this.fontStylePlugin = this.zTableInstance.pluginManager.getPlugin(FontStylePlugin.pluginName);
        this.toggleDisabled(false);
    }
    protected toggleDisabled(isDisabled: boolean) {
        let ele: HTMLElement = this.container.querySelector('.z-font-size');
        let btn: HTMLElement = this.container.querySelector('.z-tools-btn');
        this.disabled = !isDisabled;
        if(!isDisabled) {
            btn.classList.add('z-drop-down-disabled');
            ele.classList.add('z-table-icon-disabled');
        } else {
            btn.classList.remove('z-drop-down-disabled');
            ele.classList.remove('z-table-icon-disabled');
        }
    }
    public selectChange() {

    }
    public getDom() {
        this.container = document.createElement('div');
        this.container.setAttribute('class', this.containerClassName);
        this.container.innerHTML=`
            <div class="z-table-tools-font-size z-font-size-container">
                <div class="z-tools-btn" >
                    <div class="z-font-size">10</div>
                    <div class="icon-down"></div>
                </div>
                <div class="font-options">
        
                </div>
            </div>
        `;
        let tpl: any = document.createDocumentFragment();
        tpl.appendChild(this.container);
        let optionsContainer = this.container.querySelector('.font-options') as HTMLElement;
        for(let size of FontSizeOptions) {
            optionsContainer.append(createSizeOption(size));
        }
        this.container.querySelector('.icon-down').addEventListener('click', (e) => {
            if(this.disabled) return;
            optionsContainer.style.display = 'block';
            e.stopPropagation();
            e.preventDefault();
        });
        document.addEventListener('click', () => {
            optionsContainer.style.display = 'none';
        });
        this.container.querySelector('.font-options').addEventListener('click', (e) => {
            console.dir(e);
            let ele: HTMLElement = <any>e.target;
            console.dir(ele)
            while(true) {
                if(ele.hasAttribute('zSize')) {
                    let val = Number(ele.getAttribute('zSize'));
                    if(isNaN(val) === false) {
                        this.fontStylePlugin.excute({size: val});
                    }
                }
                if(ele.classList.contains('z-table-tools-font-size') || ele.nodeName === 'BODY') {
                    break;
                } else {
                    ele = <any>ele.parentNode;
                }
            }
        });
        return tpl;
    }
    protected changeActive(val: number) {
        let iconEle = this.container.querySelector('.z-tools-icon').classList;
        let activeKey = '';
        for(let key in this.iconMap) {
            iconEle.remove(key);
            if(this.iconMap[key] === val) {
                activeKey = key;
            }
        }
        iconEle.add(activeKey);
        let optionsNodes = this.container.querySelectorAll('.font-h-item');
        optionsNodes.forEach(item => {
            if(Number(item.getAttribute('EHorizontally')) === val) {
                item.classList.add('font-h-item-active');
            } else {
                item.classList.remove('font-h-item-active');
            }
        })
    }
}